{% extends "sentry/bases/settings.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_features %}
{% load sentry_helpers %}
{% load sentry_plugins %}

{% block wrapperclass %} {{ block.super }} show-rightbar settings white-bg{% endblock %}

{% block header_nav %}
  <ul class="nav nav-tabs">
    <li>
      <a href="{% absolute_uri '/{}/{}/' project.organization.slug project.slug %}">Issues</a>
    </li>
    <li>
      <a href="{% absolute_uri '/{}/{}/dashboard/' project.organization.slug project.slug %}">Overview</a>
    </li>
    <li>
      <a href="{% absolute_uri '/{}/{}/releases/' project.organization.slug project.slug %}">Releases</a>
    </li>
  </ul>
{% endblock %}

{% block header_action %}
  <a class="btn btn-sm btn-default active" href="{% absolute_uri '/{}/{}/settings/' project.organization.slug project.slug %}">
    <span class="icon icon-settings"></span> Project Settings
  </a>
{% endblock %}

{% block main %}
  <h2>{% trans "Project Settings" %}</h2>
  <form class="form-stacked" action="" method="post" id="project_settings">
    {% csrf_token %}

    {{ form|as_crispy_errors }}

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Project Details" %}</h3>
      </div>
      <div class="box-content with-padding">
        {{ form.name|as_crispy_field }}
        {{ form.slug|as_crispy_field }}
        {{ form.team|as_crispy_field }}
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Email" %}</h3>
      </div>
      <div class="box-content with-padding">
        {{ form.mail_subject_prefix|as_crispy_field }}
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Event Settings" %}</h3>
      </div>
      <div class="box-content with-padding">
        {{ form.default_environment|as_crispy_field }}
        {{ form.resolve_age|as_crispy_field }}
        <p><small><strong>Note: Enabling auto resolve will immediately resolve anything that has not been seen within this period of time. There is no undo!</strong></small></p>
        {{ form.scrub_data|as_crispy_field }}
        {{ form.scrub_defaults|as_crispy_field }}
        {{ form.sensitive_fields|as_crispy_field }}
        {{ form.safe_fields|as_crispy_field }}
        {{ form.scrub_ip_address|as_crispy_field }}
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Client Security" %}</h3>
      </div>
      <div class="box-content with-padding">
        {% with form.origins as field %}
        <p>{% blocktrans with 'https://github.com/getsentry/raven-js' as link %}Configure origin URLs which Sentry should accept events from. This is used for communication with clients like <a href="{{ link }}">raven-js</a>.{% endblocktrans %}
        <br>
        {% blocktrans %}This will restrict requests based on the <code>Origin</code> and <code>Referer</code> headers.{% endblocktrans %}</p>
        {{ field|as_crispy_field }}
        {% endwith %}
        {{ form.scrape_javascript|as_crispy_field }}
        {{ form.token|as_crispy_field }}
        {{ form.token_header|as_crispy_field }}
        {{ form.verify_ssl|as_crispy_field }}
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Remove Project" %}</h3>
      </div>
      <div class="box-content with-padding">
        {% if not ACCESS.project_admin %}
        <p>{% trans "You do not have the required permission to remove this project." %}</p>
        {% elif project.is_internal_project %}
        <p>{% trans "This project cannot be removed. It is used internally by the Sentry server." %}</p>
        {% else %}
        <p class="clearfix">
          <a href="{% url 'sentry-remove-project' project.organization.slug project.slug %}" class="btn btn-danger pull-right">{% trans "Remove Project" %}</a>
          Remove the <strong>{{ project.slug }}</strong> project and all related data. </br>
          Careful, this action cannot be undone.
        </p>
        {% endif %}
      </div>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary btn-lg">{% trans "Save Changes" %}</button>
    </div>
  </form>

  <script>
  (function(){
    var formatHours = function(val) {
      val = parseInt(val, 10);
      if (val === 0) {
          return 'Disabled';
      } else if (val > 23 && val % 24 === 0) {
          val = (val / 24);
          return val + ' day' + (val != 1 ? 's' : '');
      }
      return val + ' hour' + (val != 1 ? 's' : '');
    }

    $("input[type=range]").each(function(n, el){
      var $el = $(el),
          min = parseInt($el.attr('min'), 10),
          max = parseInt($el.attr('max'), 10),
          step = parseInt($el.attr('step'), 10),
          values = [],
          $value = $('<span class="value"></span>');

      var i = min;
      while (i <= max) {
        values.push(i);
        if (i < 12) {
          i += 1;
        } else if (i < 24) {
          i += 3;
        } else if (i < 36) {
          i += 6;
        } else if (i < 48) {
          i += 12;
        } else {
          i += 24;
        }
      }

      $el.on("slider:ready", function(event, data) {
        $value.appendTo(data.el);
        $value.html(formatHours(data.value));
      }).on("slider:changed", function(event, data) {
        $value.html(formatHours(data.value));
      }).simpleSlider({
        range: [min, max],
        step: step,
        allowedValues: values,
        snap: true
      });
    });

    $.each({{ form.org_overrides|to_json|safe }}, function(n, value) {
      if ($('#id_' + value).attr('disabled')) {
        $('<span/>').addClass('disabled-indicator tip')
          .attr('title', {% filter to_json %}{% trans "This option is enforced by your organization's settings and cannot be customized per-project." %}{% endfilter %})
          .append(
            $('<span/>').addClass('icon-question')
          ).insertBefore('#hint_id_' + value);
      }
    });

    $('.tip').tooltip();
  }());
  </script>
{% endblock %}

{% block sidebar %}
  <h6 class="nav-header">{% trans "Configuration" %}</h6>
  <ul class="nav nav-stacked">
    <li{% if page == 'details' %} class="active"{% endif %}>
        <a href="{% url 'sentry-manage-project' project.organization.slug project.slug %}">{% trans "General" %}</a>
    </li>
    <li{% if page == 'alerts' %} class="active"{% endif %}>
        <a href="{% absolute_uri '/{}/{}/settings/alerts/' project.organization.slug project.slug %}">{% trans "Alerts" %}</a>
    </li>
    <li{% if page == 'tags' %} class="active"{% endif %}>
        <a href="{% url 'sentry-manage-project-tags' project.organization.slug project.slug %}">{% trans "Tags" %}</a>
    </li>
    <li{% if page == 'issue-tracking' %} class="active"{% endif %}>
        <a href="{% url 'sentry-project-issue-tracking' project.organization.slug project.slug %}">{% trans "Issue Tracking" %}</a>
    </li>
    <li{% if page == 'release-tracking' %} class="active"{% endif %}>
        <a href="{% absolute_uri '/{}/{}/settings/release-tracking/' project.organization.slug project.slug %}">{% trans "Release Tracking" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/data-forwarding/' project.organization.slug project.slug %}">{% trans "Data Forwarding" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/saved-searches/' project.organization.slug project.slug %}">{% trans "Saved Searches" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/debug-symbols/' project.organization.slug project.slug %}">{% trans "Debug Information Files" %}</a>
    </li>
    <li>
        <a class="badged" href="{% absolute_uri '/{}/{}/settings/processing-issues/' project.organization.slug project.slug %}">{% trans "Processing Issues" %}
        <span id="processing-badge"></span>
        </a>
        {% if processing_issues > 0 %}
        <script>
          ReactDOM.render(React.createElement(Sentry.Badge, {
            text: '{{ processing_issues|safe }}',
            isNew: true,
          }), document.getElementById('processing-badge'));
        </script>
        {% endif %}
    </li>
  </ul>
  <h6 class="nav-header">{% trans "Data" %}</h6>
  <ul class="nav nav-stacked">
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/install/' project.organization.slug project.slug %}">{% trans "Error Tracking" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/csp/' project.organization.slug project.slug %}">{% trans "CSP Reports" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/user-feedback/' project.organization.slug project.slug %}">{% trans "User Feedback" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/filters/' project.organization.slug project.slug %}">{% trans "Inbound Filters" %}</a>
    </li>
    <li>
        <a href="{% absolute_uri '/{}/{}/settings/keys/' project.organization.slug project.slug %}">{% trans "Client Keys (DSN)" %}</a>
    </li>
  </ul>
  {% with project|get_plugins as plugins %}
    <h6 class="nav-header">{% trans "Integrations" %}</h6>
    <ul class="nav nav-stacked">
      <li class="{% if page == 'plugins' %} active{% endif %}">
        <a href="{% url 'sentry-manage-project-plugins' project.organization.slug project.slug %}">{% trans "All Integrations" %}</a>
      </li>
    {% for p in plugins %}
      <li{% if page == 'plugin' and plugin.slug == p.slug %} class="active"{% endif %}>
          <a href="{% url 'sentry-configure-project-plugin' project.organization.slug project.slug p.slug %}">{{ p.get_title }}</a>
      </li>
    {% endfor %}
    </ul>
  {% endwith %}
{% endblock %}
